<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Leaflet</title>
</head>

<!-- 1.引入Leaflet css 与js 文件，官网要求，css在前 js在后 -->
<link rel="stylesheet" href="./leaflet/leaflet.css" />
<script src="./leaflet/leaflet-src.js"> </script>
<!-- 2.增加 地图css样式，设置高度，这个官网要求必须的。**不设置会不显示地图 ** -->
<style>
  #mapDiv {
    height: 300px;
  color:  #199900;
  }
</style>

<body>
  <!-- 创建一个地图的div容器，id必须有 但是自定义 -->
  <div id="mapDiv"></div>

  <script>
    //到 mapbox 官网注册并创建下面的access token都是免费的，不过有5w次的浏览限制
    const access_token = "pk.eyJ1IjoidG9wYXp1ciIsImEiOiJja2QzeGhiejUwMWtyMnJxc2h0MGY1bGJoIn0.TpIBb16TbQ4_hTcLDw-rMg";
    var url = `https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=${access_token}`;
    //初始化地图：其中[51.505, -0.09]地理位置，13是变焦的大小
    var leafletMap = L.map('mapDiv').setView([41, 123], 5);
    //将url图层资源加载到地图上，并设置最大的聚焦(mapbox官网最大的也是18了);还有map样式(id 是 地图的样式并不是我们平常认识的id，本文选择了 street 的map)
    L.tileLayer(url, {
      maxZoom: 18,
      id: 'mapbox.streets'
    }).addTo(leafletMap);
    //增加一个marker ，地图上的标记，并绑定了一个popup，且默认打开
    L.marker([41, 123]).addTo(leafletMap)
      .bindPopup("<b>Hello world!</b><br />I am a popup.")
      .openPopup();
    //增加一个圈，设置圆心、半径、样式
    L.circle([41, 123], 200000, {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5
    }).addTo(leafletMap).bindPopup("I am a circle.");
    //增加多边形
    L.polygon([
      [41, 123],
      [39, 121],
      [41, 126]
    ]).addTo(leafletMap).bindPopup("I am a polygon.");
    //为点击地图的事件 增加popup
    var popup = L.popup();
    function onMapClick(e) {
      popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(leafletMap);
    }
    leafletMap.on('click', onMapClick);
  </script>

</body>

</html>